<template>
  <div class="my-container">
    <van-nav-bar left-text="订单中心" @click-left="this.$router.go(-1)" />

    <!-- 用户区域 -->
    <div class="user">
      <!-- 头像区域 -->
      <div class="user-head">
        <div class="avator">
          <img :src="'http://192.168.101.65:9000' + user.userpic" alt="" />
          <span>{{ user.name }}</span>
        </div>
        <van-icon name="arrow" @click="showPerson" />
      </div>
      <!-- 优惠券、积分区域 -->
      <div class="user-body">
        <div class="body-point">
          <div class="point" @click="show = true">
            <p class="bold">{{ this.couponlist.length }}张</p>
            <p>优惠券</p>
          </div>
          <div class="point" @click="this.$router.push('/point')">
            <p class="bold">{{ user.point }}</p>
            <p>积分</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品订单 -->
    <div class="preown_order content">
      <h5>商品订单</h5>
      <ul>
        <li v-for="(item, index) in shopTab" :key="item.id" @click="goShopOrder(index)">
          <a
            ><van-icon :name="item.icon" />
            <p>{{ item.name }}</p></a
          >
        </li>
      </ul>
    </div>

    <!-- 废品订单 -->
    <div class="preown_order content">
      <h5>废品订单</h5>
      <ul>
        <li v-for="(item, index) in wasteTab" :key="item.id" @click="goWasteOrder(index)">
          <a
            ><van-icon :name="item.icon" />
            <p>{{ item.name }}</p></a
          >
        </li>
      </ul>
    </div>

    <!-- 我的工具 -->
    <div class="my_tool content">
      <h5>我的工具</h5>
      <ul>
        <li>
          <router-link to="/address"
            ><van-icon name="location-o" />
            <p>收货地址</p></router-link
          >
        </li>
        <li>
          <router-link to="setting"
            ><van-icon name="volume-o" />
            <p>系统通知</p></router-link
          >
        </li>
        <li>
          <router-link to="/mypub"
            ><van-icon name="good-job-o" color="#6ba54e" />
            <p>我的公益</p></router-link
          >
        </li>
      </ul>
    </div>

    <!-- 关于我们 -->
    <div class="contact content">
      <h5>关于我们</h5>
      <ul>
        <li>
          <router-link to="/introduce"
            ><van-icon name="comment-o" />
            <p>功能介绍</p></router-link
          >
        </li>
      </ul>
    </div>

    <!-- 优惠券 -->
    <van-action-sheet v-model:show="show" title="优惠券">
      <div class="coupon-content">
        <van-tabs v-model:active="active">
          <van-tab title="可用">
            <div class="coupon-card" v-for="item in couponlist" :key="item.id">
              <div class="left">
                <p class="price">立减 {{ item.price }}</p>
                <p>商品优惠券</p>
              </div>
              <div class="right">
                <p class="name">{{ item.name }}</p>
                <p>{{ item.range }}</p>
                <p>{{ item.time }}</p>
                <p>{{ item.shopname }}</p>
              </div>
            </div>
          </van-tab>
          <van-tab title="不可用" disabled>内容 2</van-tab>
        </van-tabs>
      </div>
    </van-action-sheet>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../components/TabbarView.vue'
import { getUser } from '../api/user.js'
import { showToast } from 'vant'
export default {
  data() {
    return {
      // 优惠券
      show: false,
      // 选中的优惠券标签
      active: 0,
      // 优惠券列表
      couponlist: [
        {
          id: 1,
          name: '满37可用',
          range: '全场通用',
          time: '2023.01.12 - 2023.5.5',
          price: 8
        },
        {
          id: 2,
          name: '满100可用',
          range: '仅限该店铺使用',
          time: '2023.01.12 - 2023.5.5',
          price: 8,
          shopname: '肥肥日用专营店'
        }
      ],
      // 商品订单
      shopTab: [
        { id: 1, name: '待发货', icon: 'cash-back-record' },
        { id: 2, name: '已收货', icon: 'logistics' },
        { id: 3, name: '历史订单', icon: 'edit' }
      ],
      // 废品订单
      wasteTab: [
        { id: 1, name: '待上门', icon: 'cash-back-record' },
        { id: 2, name: '已回收', icon: 'balance-list-o' },
        { id: 3, name: '全部订单', icon: 'logistics' }
      ],
      // 用户信息
      user: JSON.parse(window.sessionStorage.getItem('userInfo'))
    }
  },
  components: {
    Tabbar
  },
  created() {
    this.getUser()
  },
  methods: {
    // 获取用户信息
    async getUser() {
      const { data: res } = await getUser()
      if (res.code === 1) {
        this.user = res.data
        window.sessionStorage.setItem('userInfo', JSON.stringify(res.data))
      } else {
        showToast('获取数据失败！')
      }
    },
    // 编辑个人
    showPerson() {
      this.$router.push('/message')
    },
    // 跳转到商品订单
    goShopOrder(index) {
      window.sessionStorage.setItem('shopActive', index)
      this.$router.push({ name: 'shopOrder', params: { active: index } })
    },
    // 跳转到废品订单
    goWasteOrder(index) {
      window.sessionStorage.setItem('wasteActive', index)
      this.$router.push({ name: 'wasteOrder', params: { active: index } })
    }
  }
}
</script>

<style lang="less" scoped>
.my-container {
  width: 100%;
  padding-bottom: 55px;
  overflow: hidden;

  .van-nav-bar {
    background-color: #55c24d;

    :deep(.van-nav-bar__text) {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }

  // 用户区域
  .user {
    padding: 0 20px;
    background-color: #fff;

    // 头像
    .user-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 10px;

      .avator {
        display: flex;
        align-items: center;
        width: 50%;
        height: 70px;
        line-height: 70px;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        span {
          margin-left: 15px;
        }
      }
    }
    .user-body {
      // 优惠券、积分
      .body-point {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;

        .point {
          width: 50%;
          // height: 60px;
          text-align: center;

          p {
            margin: 6px 0;
            font-size: 15px;

            &:nth-child(2) {
              color: #666;
              font-size: 12px;
            }
          }

          &:nth-child(2) {
            border-left: 1px solid #666;
          }
        }
      }
    }
  }

  .my_tool {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.3%;
      }
    }
  }

  .contact {
    ul {
      display: flex;
      li {
        width: 33.3%;
      }
    }
  }
}
.bold {
  font-weight: 700;
}

// 公共内容样式
.content {
  margin: 0 8px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  h5 {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    margin: 10px 0;
    border-bottom: 1px solid #eee;
    font-weight: 400;
  }

  ul {
    display: flex;
    justify-content: space-between;

    margin: 0;

    :deep(.van-icon) {
      color: #333;
      font-size: 24px;
    }

    li {
      display: flex;
      align-items: center;
      width: 33.3%;
      height: 60px;

      a {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;

        p {
          margin: 0;
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
}

// 优惠券
.coupon-content {
  background-color: #efefef;
  padding-bottom: 15px;
  p {
    margin: 8px 0;
  }

  .coupon-card {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 92%;
    height: 120px;
    background-color: #fff;
    margin: 14px auto;
    border-radius: 6px;

    .left {
      color: #1989fa;
      .price {
        font-size: 20px;
        font-weight: 600;
      }
    }

    .right {
      .name {
        color: #333;
        font-size: 16px;
        font-weight: 600;
      }
      &:nth-child(2) {
        color: #666;
        font-size: 13px;
      }
    }
  }
}
</style>
